<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.css" type="text/css">
<div class="panel panel-default" id="mappanel">
    <div class="panel-heading">
    <h3 class="panel-title">应用中所有研究对象的世界地图。 <span style="font-size: small"> (使用“打开地图”功能查看筛选的项目或某个分类单元)</span></h3>
  </div>
  <div class="panel-body">
    <div id="map" class="map" style="width: 100%; height: 300px;">
    Displaying Map requires Internet Access to load map from https://server.arcgisonline.com
    </div>
  </div>
</div>
<div id='MapPopup'></div>
<script>
var map,vectorSource,SampleSource;

function InitMap() {
var attribution = new ol.Attribution({
        html: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
      });
var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: 'EPSG:4326',
  undefinedHTML: '&nbsp;'
});
map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
              attributions: [attribution],
              url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
            })
    })
  ],
  controls: ol.control.defaults({
    attributionOptions:  ({
      collapsible: false
    })
  }).extend([mousePositionControl]),
  target: 'map',
  view: new ol.View({
    center: [0, 47],
    zoom: parseFloat($("#map").css('height'))/450 {# Mise à l'echelle, affiche toute la hauteur à l'echelle 1 sur une zone de 450px de haut #}
  })
});

var infoBox = document.getElementById('info');

// Create vector source and the feature to it.
vectorSource = new ol.source.Vector();
var vectorLayer= new ol.layer.Vector({
  source: vectorSource
});

var RedIconStyle = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          size: [40, 40],
          offset: [52, 0],
          opacity: 1,
          scale: 0.19,
          src: '/static/dots.png'
        })
      });

SampleSource = new ol.source.Vector();
var SampleLayer= new ol.layer.Vector({
  source:SampleSource,style: RedIconStyle
});
// Add the vector layer to the map.
map.addLayer(vectorLayer);
map.addLayer(SampleLayer);

var MapPopupElt = document.getElementById('MapPopup');
var popup = new ol.Overlay({
  element: MapPopupElt,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [3, 0]
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });

  if (feature) {
    var coordinates = feature.getGeometry().getCoordinates();
{#    popup.setPosition(coordinates); Utilisation de l'evt plutot pour traiter le monde cyclique#}
    popup.setPosition(evt.coordinate);
{#    console.log(coordinates,evt.coordinate);#}
    MapPopupContent='Get Data for sample '+feature.get('sampleid');
    $(MapPopupElt).popover({
      'placement': 'right',
      'html': true,
      'content': function (){return MapPopupContent;}
    });
    $(MapPopupElt).popover('show');
    $.get('/search/mappopup/getsamplepopover/'+feature.get('sampleid'),function(data){
      MapPopupContent=data;
      $(MapPopupElt).popover('show');
    });
  }
  else
    $(MapPopupElt).popover('destroy');
});

} //InitMap


 $.getScript("https://cdnjs.cloudflare.com/ajax/libs/ol3/3.20.1/ol.js", function(){
 $("#map").html("");
  InitMap();
  $("#MapOutW").val($("#filt_MapOutW").val());
  $("#MapOutN").val($("#filt_MapOutN").val());
  $("#MapOutE").val($("#filt_MapOutE").val());
  $("#MapOutS").val($("#filt_MapOutS").val());

{#  ShowSample({ {% if Projid %} projid:{{Projid }} {%endif%} });#}
  ShowSample({ });
 });


function ShowSample(p){
{#  console.log(p);#}
$.getJSON( "/search/mappopup/samples/",p, function( data ) {
  SampleSource.clear();
  $.each( data, function( key, val ) {
{#    console.log(key,val);#}
    var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([val['long'],val['lat']], 'EPSG:4326','EPSG:3857'))
    ,sampleid:val['id']});
    SampleSource.addFeature(iconFeature);

  });

});
}

</script>
